<template>
  <a-card :bordered="false" title="发起流程">
    <div class="card-list" ref="content">
      <a-list rowKey="id" :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}" :dataSource="records">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card :hoverable="true">
            <a-card-meta>
              <a slot="title">{{ item.name }}-v{{item.version}}</a>
              <!--  <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>-->
              <div class="meta-content" slot="description">{{ item.description }}</div>
            </a-card-meta>
            <template class="ant-card-actions" slot="actions">
              <a @click="$refs.drawer.showDrawer(item)">发起流程</a>
              <a>流程图</a>
            </template>
          </a-card>
        </a-list-item>
      </a-list>
    </div>
    <start-process-drawer ref="drawer"></start-process-drawer>
  </a-card>
</template>
<script>

  import api from '../startProcess/js/api'
  import StartProcessDrawer from './startProcess_drawer'

  export default {
    name: 'CardList',
    components: { StartProcessDrawer },
    data() {
      return {
        api: Object.assign(api, this.api),
        records: []
      }
    },
    methods: {
      list() {
        this.http.get(this, {
          url: this.api.processDefinition.listMyself,
          success: function(me, data) {
            me.records = data.records
            me.total = data.total
          }
        })
      },
      startProcess(row) {

      }
    },
    created() {
      this.list()
    }
  }
</script>

<style lang="less" scoped>
  @import "~@/components/index.less";

  .card-list {
    /deep/ .ant-card-body:hover {
      .ant-card-meta-title > a {
        color: @primary-color;
      }
    }

    /deep/ .ant-card-meta-title {
      margin-bottom: 12px;

      & > a {
        display: inline-block;
        max-width: 100%;
        color: rgba(0, 0, 0, .85);
      }
    }

    /deep/ .meta-content {
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      height: 64px;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;

      margin-bottom: 1em;
    }
  }

  .card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 48px;
  }

  .ant-card-actions {
    background: #f7f9fa;

    li {
      float: left;
      text-align: center;
      margin: 12px 0;
      color: rgba(0, 0, 0, 0.45);
      width: 50%;

      &:not(:last-child) {
        border-right: 1px solid #e8e8e8;
      }

      a {
        color: rgba(0, 0, 0, .45);
        line-height: 22px;
        display: inline-block;
        width: 100%;

        &:hover {
          color: @primary-color;
        }
      }
    }
  }

  .new-btn {
    background-color: #fff;
    border-radius: 2px;
    width: 100%;
    height: 188px;
  }

</style>

